<template>
  <div class="baseInfo">
    <div class="baseSetting">基本信息设置</div>
    <creat-child-site :baseFromInfo="props.baseInfo" ref="CCS" @checkSetTime="checkSetTime"></creat-child-site>
    <base-modal :width="modAlProps.width" :isVisible="isVisible" :title="modAlProps.title" :buttons="buttons"
      @handleOk="buttonMessage" @handleCancle="isVisible = false" class="site_detail_modal" cancleText="关闭">
      <template v-slot:body>
        <div class="setTime-item-switch">
          <span class="switch-label">周期性开启关闭设置:</span>
          <a-switch size="small" v-model:checked="setTimeStatus"></a-switch>
        </div>
        <div class="setTime-item-cycle">
          <a-radio-group v-model:value="cycle">
            <a-radio :value="2">时间段</a-radio>
            <a-radio :value="1">每天</a-radio>
          </a-radio-group>
        </div>
        <div class="setTime-item-picker">
          <date-range-picker v-model:value="DRPValue" v-show="scheduleTaskDto.type == '2'"
            :disabledInfo="disabledInfo"></date-range-picker>
          <time-range-picker v-model:value="TRPValue" v-show="scheduleTaskDto.type == '1'"></time-range-picker>
        </div>
      </template>
    </base-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch } from "vue";
import { Modal, message, Tree } from "ant-design-vue";
import baseModal from "@/components/modal/baseModal.vue";
import creatChildSite from "../creatSiteForm/creatChildSite.vue";
import timeRangePicker from "@/components/picker/timeRangePicker.vue";
import dateRangePicker from "@/components/picker/dateRangePicker.vue";
import { cloneDeep } from "lodash";
import { detailDataItemType, modeProp } from "@/type.d";
import request from "@/api/index";
import dayjs, { Dayjs } from 'dayjs';
//props

const props = defineProps({
  baseInfo: {
    type: Object,
    default: {},
  },
});
//data
const modAlProps: modeProp = reactive({
  width: "M",
  title: "站点定时开关任务",
});
const TRP = ref<Dayjs>();
const isVisible = ref<Boolean>(false); // 模态框是否可见
//模态框button按钮个数和文案修改
const DRPValue = ref<[Dayjs, Dayjs]>();
const TRPValue = ref<[Dayjs, Dayjs]>();
const setTimeStatus = ref<string | number | Boolean>(false); // 定时任务开启状态
const cycle = ref<string | number>(0); // 周期任务选项
const scheduleUpdate = ref<Boolean>(false); // 定时任务是否发生改变;
let scheduleTaskDto = reactive<detailDataItemType | any>({
  //无需响应式，不参与绑定数据
  onlineTime: "", //TRPValue.value[0], // 开始时间， 格式：月：yyyy-MM-dd，即每月的第几天; 每天：HH:mm:ss
  offlineTime: "", //TRPValue.value[1], // 结束时间
  type: 2, // 周期任务选项1是月，2是天
  status: 0, // 定时任务开启状态
});
let buttons = ref<detailDataItemType[]>([
  {
    text: "确定",
    "html-type": "submit",
  },
]);
const disabledInfo = ref({
  type: 1,
  startDays: -1,
})

//watch
watch(
  () => props.baseInfo,
  (newVal: detailDataItemType, oldVal) => {
    if (newVal.scheduleTaskDto) {
      setTimeStatus.value = newVal.scheduleTaskDto.status ? true : false;
      cycle.value = +newVal.scheduleTaskDto.type;
      scheduleTaskDto.status = newVal.scheduleTaskDto.status;
      scheduleTaskDto.type = +newVal.scheduleTaskDto.type;
      scheduleTaskDto.onlineTime = newVal.scheduleTaskDto.onlineTime;
      scheduleTaskDto.offlineTime = newVal.scheduleTaskDto.offlineTime;
      if (cycle.value == 2) {
        if (newVal.scheduleTaskDto.onlineTime && newVal.scheduleTaskDto.offlineTime) {
          DRPValue.value = [
            newVal.scheduleTaskDto.onlineTime,
            newVal.scheduleTaskDto.offlineTime,
          ];
        } else {
          DRPValue.value = undefined;
        }
      } else {
        if (newVal.scheduleTaskDto.onlineTime && newVal.scheduleTaskDto.offlineTime) {
          TRPValue.value = [
            newVal.scheduleTaskDto.onlineTime,
            newVal.scheduleTaskDto.offlineTime,
          ];
        } else {
          TRPValue.value = undefined;
        }
      }
    }
  }
);
watch(
  () => cycle.value,
  (newVal, oldVal) => {
    scheduleTaskDto.type = newVal;
  }
);
watch(
  () => TRP.value,
  (newVal, oldVal) => {
    console.log(newVal, 'oldVal')
  }
);
// methods
const checkSetTime = (val: Boolean) => {
  isVisible.value = val;
};
const buttonMessage = async (msg: detailDataItemType) => {
  //保存
  [scheduleTaskDto.onlineTime, scheduleTaskDto.offlineTime] =
    cycle.value == 1 ? TRPValue.value ? TRPValue.value : [] : DRPValue.value ? DRPValue.value : [];
  scheduleTaskDto.status = setTimeStatus.value ? 1 : 0;
  scheduleTaskDto.type = cycle.value;
  console.log(scheduleTaskDto, 9991);
  isVisible.value = false;
};

// defineExpose
const CCS = ref<any>(null);
defineExpose({ CCS, scheduleTaskDto });
</script>

<style lang="less" scoped>
.baseInfo {
  margin-top: 24px;

  .baseSetting {
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 40px;
    background: #f7f8fa;
    border-radius: 2px 2px 2px 2px;
    margin-bottom: 32px;
    position: relative;
    padding-left: 24px;
  }

  .baseSetting:after {
    width: 3px;
    height: 12px;
    background: #1f6ded;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    content: "";
    position: absolute;
    left: 12px;
    z-index: 1;
    top: 14px;
  }
}
</style>
<style lang="less">
.baseInfo {
  .SEOSetting {
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 40px;
    background: #f7f8fa;
    border-radius: 2px 2px 2px 2px;
    margin-bottom: 24px;
    position: relative;
    padding-left: 24px;
    margin-top: 32px;
  }

  .SEOSetting:after {
    width: 3px;
    height: 12px;
    background: #1f6ded;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    content: "";
    position: absolute;
    left: 12px;
    z-index: 1;
    top: 14px;
  }

  .ant-form {
    .ant-form-item {
      width: 487px;
      display: flex;

      .ant-form-item-control {
        width: 400px;
        margin-left: 4px;
        flex: unset;
      }

      .siteDomain-input {
        width: 294px;
      }

      .siteDomainAlias-input {
        width: 265px;
      }
    }

    .addSiteDomain {
      width: 487px;
    }
  }
}

.site_detail_modal {
  .setTime-item-switch {
    margin-bottom: 16px;

    .switch-label {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      margin-right: 8px;
    }
  }

  .setTime-item-cycle {
    margin-bottom: 12px;
  }
}
</style>
